<template>
  <div class="taobao-cart">
    <div
      v-for="item in cartStore.items"
      :key="item.productId"
      class="cart-item"
    >
      <div class="check-box" @click="toggleCheck(item.cartId)">
        <div class="check-circle" :class="{ checked: item.checked }">
          <el-icon v-if="item.checked" class="check-icon">
            <Check />
          </el-icon>
        </div>
      </div>
      <div class="item-img">
        <img :src="item.mainImage" :alt="item.productName" />
      </div>

      <div class="item-info">
        <h3 class="item-title">{{ item.productName }}</h3>
        <p class="price">
          ￥{{ item.price }}
          <span v-if="item.originalPrice" class="original-price"
            >￥{{ item.originalPrice }}</span
          >
        </p>
        <p
          v-if="item.originalPrice && item.price < item.originalPrice"
          class="savings-info"
        >
          <span class="savings-label">省</span>￥{{ calculateSavings(item) }}
        </p>
      </div>

      <div class="quantity-control">
        <div class="quantity-buttons">
          <button
            class="round-btn minus"
            @click="updateQuantity(item.productId, -1)"
            :disabled="item.quantity <= 1"
          >
            -
          </button>
          <span class="quantity">{{ item.quantity }}</span>
          <button
            class="round-btn plus"
            @click="updateQuantity(item.productId, 1)"
          >
            +
          </button>
        </div>
        <div class="delete-btn" @click="deleteItem(item.cartId)">
          <el-icon>
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Check, Delete } from "@element-plus/icons-vue";
import { useCartStore } from "@/stores/cartStore"; // Import your Pinia Cart Store

// Get an instance of your Pinia store
const cartStore = useCartStore();

// --- Action handlers, directly calling Pinia Store actions ---

const toggleCheck = async (cartId) => {
  // Call the Pinia action to update the item's checked status
  // This action should in turn call your backend API
  await cartStore.toggleItemChecked(cartId);
  // The store will be refreshed by the action after API success
};

const updateQuantity = async (productId, sign) => {
  const item = cartStore.items.find((i) => i.productId === productId);
  if (item) {
    const newQuantity = item.quantity + sign;
    if (newQuantity > 0) {
      // Ensure quantity doesn't go below 1
      // Call the Pinia action to update the item's quantity
      // This action should in turn call your backend API
      await cartStore.updateItemQuantity(item.cartId, newQuantity);
      // The store will be refreshed by the action after API success
    }
  }
};

const deleteItem = async (cartId) => {
  // Call the Pinia action to remove the item
  // This action should in turn call your backend API
  await cartStore.removeItem(cartId);
  // The store will be refreshed by the action after API success
};

// --- Helper function (remains mostly unchanged) ---
const calculateSavings = (item) => {
  if (item.originalPrice && item.price < item.originalPrice) {
    const savingsPerUnit = item.originalPrice - item.price;
    const totalSavingsForItem = savingsPerUnit * item.quantity;
    return totalSavingsForItem.toFixed(2);
  }
  return "0.00";
};

// --- REMOVED: No longer needed with Pinia Store ---
// defineProps(["shopCartData"]); // No longer accept props for cart data
// defineEmits([
//   "changeShopCartData",
//   "changeNumber",
//   "deleteProduct",
// ]); // No longer emit events for cart data changes

// const localShopCartData = ref([...props.shopCartData]); // No longer use local ref for cart data

// watch(
//   localShopCartData,
//   (newVal) => {
//     localStorage.setItem("shopCartData", JSON.stringify(newVal));
//   },
//   { deep: true }
// ); // No longer watch local storage
</script>

<style scoped>
/* Your existing styles remain unchanged */
.taobao-cart {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
}

.cart-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  align-items: center;
  position: relative;
}

/* 圆形选择按钮 */
.check-box {
  margin-right: 12px;
  cursor: pointer;
}

.check-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-circle.checked {
  background-color: #ff5000;
  border-color: #ff5000;
}

.check-icon {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* 左侧图片 */
.item-img {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  flex-shrink: 0;
}

.item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 中间商品信息 */
.item-info {
  flex: 1;
  min-width: 0;
  padding-right: 15px;
}

.item-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
  font-weight: normal;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.price {
  color: #ff5000;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 5px 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.original-price {
  color: #999;
  font-size: 0.8em;
  text-decoration: line-through;
  margin-left: 8px;
  font-weight: normal;
}

.savings-info {
  color: #666;
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.savings-label {
  background-color: #ff5000;
  color: white;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 5px;
  font-size: 11px;
  display: inline-block;
  line-height: 1;
}

/* 右边圆形数量按钮 */
.quantity-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.quantity-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.delete-btn {
  position: absolute;
  top: 80px;
  right: 15px;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
  padding: 4px;
  border-radius: 4px;
  font-size: 20px;
}

.delete-btn:hover {
  color: #ff5000;
}

.round-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}

.round-btn:hover {
  background: #eee;
}

.round-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
}

/* 交互效果 */
.cart-item:hover {
  background: #fafafa;
}
</style>